<template>
  <div class="cascader">
    <div class="demoright-f">
      <div
        class="demonstration demoright"
        @mouseover="show('hover')"
        @mouseout="hidden('hover')"
      >
        <span>冰箱</span>
        <i class="el-icon-caret-bottom" v-show="!hover"></i>
        <i class="el-icon-caret-top" v-show="hover"></i>
      </div>
    </div>
    
    <div
      class="menu-right"
      v-show="hover"
      @mouseover="show('hover')"
      @mouseout="hidden('hover')"
    >
      <div
        v-for="(item, index) in data.items"
        :key="index"
        class="menu-right-2"
      >
        <ul>
          <li>{{ item.label }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hover: false,
    };
  },
  props: {
    data: Array,
  },
  methods: {
    show(type) {
      this[type] = true;
    },
    hidden(type) {
      this[type] = false;
    },
  },
};
</script>

<style scoped>
.cascader {
  text-align: center;
  display: inline-block;
}
.demonstration > span {
  font-size: 14px;
}
.menu-right {
  height: 420px;
  width: 350px;
  background-color: rgb(255, 255, 255);
  position: absolute;
  z-index: 10;
}
.menu-right-2 {
  height: 80px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-left: 30px;
  color: gray;
  /* box-sizing: border-box; */
}
.menu-right-2 > ul li {
  font-size: 11px;
  float: left;
  color: rgb(22, 23, 24);
  border-right: 1px solid rgba(255, 255, 255, 0.274);
}
</style>